import React, { Component } from 'react';
import '../css/SchoolDetail.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import  axios from  'axios'
import  HeaderImg from  './HeaderImg'
import Dibu from './dibu'
import  ZuzhiDetailComponent from  './ZuzhiDetailComponent'
@observer class SchoolDetail extends Component {
    constructor(props) {
        super(props)
        this.state={
            School:[],
            size:0,
            total:1,
            items:[],
            img:'',
            style:1,
            intervaling:'',
            // 学校成员
            Authorsize:"",
            Authortotal:'',
            Author:[],
            intervalingAuthor:'',
            // 组织
            ZuzhiSize:'',
            ZuzhiTotal:'',
            Zuzhi:[],
            intervalingZuzhi:''
        }
    }
    componentDidMount(){
        Mobx.history= this.props.history
        axios.get('http://www.niuduxiu.com/authentication/findByid.jhtml?mid='+this.props.match.params.id)
            .then((item)=> {
                this.setState({
                    img:item.data.raddress,
                    items:[item.data.teamName,item.data.pnumber]
                })
            })
        axios.get('http://www.niuduxiu.com/authentication/findschoolcreativity.jhtml?zid='+this.props.match.params.id+'&pageNumber=1&pageSize=10')
            .then((item)=>{
                this.setState({
                    size:item.data.pageNumber,
                    total:item.data.totalPage,
                    School:item.data.cindex
                },()=>{
                    if(this.state.total>this.state.size){
                        this.interval()
                    }
                })
            })
        axios.get('http://www.niuduxiu.com/authentication/finddesignerbyschool.jhtml?zid='+this.props.match.params.id+'&pageNumber=1&pageSize=10&mid='+Mobx.zhanghao)
            .then((item)=>{
                this.setState({
                    Authorsize:item.data.pageNumber,
                    Authortotal:item.data.totalpage,
                    Author:item.data.dlist
                })
            })
        axios.get('http://www.niuduxiu.com/authentication/findworkroombyschool.jhtml?zid='+this.props.match.params.id+'&mid='+Mobx.zhanghao+'&pageNumber=1&pageSize=10')
            .then((item)=>{
                this.setState({
                    Zuzhisize:item.data.p.pageNumber,
                    ZuzhiTotal:Math.ceil(item.data.total/10),
                    Zuzhi:item.data.list
                })
            })
    }
    interval(){
        if(this.state.total<=this.state.size){
           return false
        }else{
            this.intervaling=setInterval(()=>{
                if(document.body.scrollHeight-(document.documentElement.scrollTop||document.body.scrollTop)<700){
                    clearInterval(this.intervaling)
                    this.setState({
                        size:this.state.size+1
                    },()=>{
                        this.loading();
                    })
                }
            },100)
        }
    }
    loading(){
        axios.get('http://www.niuduxiu.com/authentication/findschoolcreativity.jhtml?zid='+this.props.match.params.id+'&pageNumber='+this.state.size+'&pageSize=10')
            .then((item)=>{
                this.setState({
                    size:item.data.pageNumber,
                    total:item.data.totalPage,
                    School:this.state.School.concat(item.data.cindex)
                },()=>{
                    if(this.state.total>this.state.size){
                        this.interval()
                    }
                })
            })
    }
    ChangeChoose(item){
        if(item===this.state.style){
            return false
        }else if(item===1){
            clearInterval(this.intervalingAuthor)
            this.interval()
            this.setState({
                style:item
            })
        }else if(item===2){
            clearInterval(this.intervaling)
            this.AuthorInterval()
            this.setState({
                style:item
            })
        }else if(item===3){
            clearInterval(this.intervaling)
            clearInterval(this.intervalingAuthor)
            this.setState({
                style:item
            })
        }
    }
    // 作者
    AuthorInterval(){
        if(this.state.Authortotal===''){
            setTimeout(()=>{
                this.AuthorInterval()
            },1000)
            return false
        }
        console.log(this.state.Authortotal)
        if(this.state.Authortotal<=this.state.Authorsize){
            return false
        }else{
            this.intervalingAuthor=setInterval(()=>{
                if(document.body.scrollHeight-(document.documentElement.scrollTop||document.body.scrollTop)<700){
                    clearInterval(this.intervalingAuthor)
                    this.setState({
                        Authorsize:this.state.Authorsize+1
                    },()=>{
                        this.loadingAuthor();
                    })
                }
            },100)
        }
    }
    loadingAuthor(){
        axios.get('http://www.niuduxiu.com/authentication/finddesignerbyschool.jhtml?zid='+this.props.match.params.id+'&pageNumber='+this.state.Authorsize+'&pageSize=10&mid='+Mobx.zhanghao)
            .then((item)=>{
                this.setState({
                    Authorsize:item.data.pageNumber,
                    Authortotal:item.data.totalpage,
                    Author:this.state.Author.concat(item.data.dlist)
                },()=>{
                    if(this.state.Authortotal>this.state.Authorsize){
                        this.AuthorInterval()
                    }
                })
            })
    }
    toDetail(item){
        this.props.history.push('/Detail/'+item.member.id)
    }
    toIndex(item){
        this.props.history.push('/Index/'+item.nz.xxMember.id)
    }
    render() {
        return (
            <div className="SchoolDetail">
                <HeaderImg items={this.state.items} img={this.state.img} />
                <ul className='chooseItems'>
                    <li className={this.state.style===1?'avtive':''} onClick={this.ChangeChoose.bind(this,1)}>校内创意</li>
                    <li className={this.state.style===2?'avtive':''} onClick={this.ChangeChoose.bind(this,2)}>校内成员</li>
                    <li className={this.state.style===3?'avtive':''} onClick={this.ChangeChoose.bind(this,3)}>校内组织</li>
                </ul>
                <div style={{display:this.state.style===1?'block':'none'}}>
                    <div className='SchoolCreate'>
                        {
                            this.state.School.map((item,index)=>{
                                return(
                                    <div className='SchoolCreateOne' key={index} onClick={this.toDetail.bind(this,item)}>
                                        <div className='Img'>
                                            <img src={item.creativity.indexImage} alt=""/>
                                        </div>
                                        <p className='title shengluehao'>
                                            {item.creativity.titleName}
                                        </p>
                                        <p className='caozuo'>
                                            <span><img src={require('../img/zan.png')} alt=""/> {item.creativity.browseCount}</span>
                                            <span><img src={require('../img/zan.png')} alt=""/> {item.creativity.likeCount}</span>
                                        </p>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <Dibu  size={this.state.size} total={this.state.total} />
                </div>
                <div  style={{display:this.state.style===2?'block':'none'}}>
                    <ul className='SchoolAuthor'>
                        {
                           this.state.Author.map((item,index)=>{
                               return(
                                   <li key={index}>
                                       <div className='left' onClick={this.toIndex.bind(this,item)}>
                                           <img src={item.nz.xxMember.headPic} alt=""/>
                                       </div>
                                       <div className='right'>
                                           <p>{item.nz.xxMember.username}</p>
                                           <p>{item.nz.xxMember.attributeValue5}</p>
                                           <button style={{display:!item.isattention?'block':'none'}}>关注</button>
                                           <button style={{display:item.isattention?'block':'none'}} className='qx'>取消关注</button>
                                       </div>
                                   </li>
                               )
                           })
                        }
                    </ul>
                    <Dibu  size={this.state.Authorsize} total={this.state.Authortotal} />
                </div>
                <div  style={{display:this.state.style===3?'block':'none'}}>
                    <ZuzhiDetailComponent  items={this.state.Zuzhi} />
                </div>
            </div>
        );
    }
}

export default SchoolDetail;
